<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="baidu-site-verification" content="code-UjJKh3jtOo">
  <link rel="stylesheet" href="//unpkg.com/@highlightjs/cdn-assets@11.5.0/styles/atom-one-dark.min.css">
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <title>Tit1e</title>
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2767111597631391" crossorigin="anonymous"></script>
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 6.3.0"><link rel="alternate" href="/atom.xml" title="Tit1e" type="application/atom+xml">
</head>

<body class="dark">
    <div class="container">
    <header class="header">
  <div class="title">
      <a href="/" class="logo">Tit1e</a>
      <div class="btn-dark"></div>
      <script>
        let bodyClx = document.body.classList;
        let btnDark = document.querySelector('.btn-dark');
        let sysDark = window.matchMedia('(prefers-color-scheme: dark)');
        let darkVal = localStorage.getItem('dark');

        let setDark = (isDark) => {
        bodyClx[isDark ? 'add' : 'remove']('dark');
        localStorage.setItem('dark', isDark ? 'yes' : 'no');
        };

        setDark(darkVal ? darkVal === 'yes' : sysDark.matches);
        requestAnimationFrame(() => bodyClx.remove('not-ready'));

        btnDark.addEventListener('click', () => setDark(!bodyClx.contains('dark')));
        sysDark.addEventListener('change', (event) => setDark(event.matches));
      </script>
  </div>
    <ul class="menu">
        
        
        
        
        <li class="menu-item ">
            <a href="/" class="menu-item-link">Home</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/archives/" class="menu-item-link">Archives</a>
        </li>
        
        
        <li class="menu-item ">
            <a href="/atom.xml" class="menu-item-link">RSS</a>
        </li>
        
        
        <li class="menu-item ">
            <a target="_blank" rel="noopener" href="https://pixeltimer.art" class="menu-item-link">Pixel Timer</a>
        </li>
        
    </ul>
    <div class="search-box">
        <input type="search" id="search" placeholder="搜索">
    </div>
</header>
    <article class="post">
  <div class="post-meta">
    <span class="post-time">12 / 20, 2017</span>
  </div>
  <div class="post-title">
    <h1 class="title">element-theme 配合 vue-cli 进行二次开发</h1>
  </div>
  
  <ul class="post-tags">
    
    <li class="tag-item">
      #学习
    </li>
    
    <li class="tag-item">
      #vue
    </li>
    
  </ul>
  
  <div class="post-content">
    <p>公司新平台我打算使用<code>element-ui</code>和<code>vue-cli</code>来开发，既然用的是现成的ui，那么就涉及到ui的定制问题，虽然是一个后台项目，并且让设计参照<code>element-ui</code>的文档去作图，但是设计不可能照搬默认主题，不在组件功能上修改，但在主题配色上肯定会进行调整。虽然官方有 <a target="_blank" rel="noopener" href="https://elementui.github.io/theme-chalk-preview/#/zh-CN">在线主题生成工具</a> ，但这个工具只能修改一个整体的主题色，连按钮的颜色都无法定制，更不用说定制圆角阴影这些效果了，所以还是要自己改文件编译才能实现最大化定制。折腾过程中遇到了点问题，在此记录一下。</p>
<p>官方也提供了定制的 <a target="_blank" rel="noopener" href="https://github.com/ElementUI/element-theme">文档</a> ，那当然是相信官方，照着官方的教程来！</p>
<span id="more"></span>
<h4 id="安装element-theme"><a href="#安装element-theme" class="headerlink" title="安装element-theme"></a>安装<code>element-theme</code></h4><pre><code class="bash">#只在当前项目安装
npm i element-theme -D

#全局安装
sudo npm i element-theme -g
</code></pre>
<p>然而我第一步就报错了……ORZ。</p>
<p>我使用的是<code>npm</code>命令，但源用的是淘宝的源。但安装的时候报错：<code>not found python2</code>。于是我去找安装<code>python2</code>的方法，结果发现 Mac 是默认集成了<code>python</code>的，那我就郁闷了，试了半天，一直报错，最后突发奇想想用<code>cnpm</code>试试，结果竟然成功了。</p>
<pre><code class="bash">#终于装上了
sudo cnpm i element-theme -g
</code></pre>
<p>好，继续。</p>
<h4 id="安装-theme-chalk"><a href="#安装-theme-chalk" class="headerlink" title="安装 theme-chalk"></a>安装 <code>theme-chalk</code></h4><p>因为我一开始构思的定制流程是在其他目录下把样式写好编译后到现有项目中替换，所以我就建了一个空文件夹，然后执行命令：</p>
<pre><code class="bash">npm i element-theme-chalk -D
</code></pre>
<p>结果当然是提醒我找不到<code>package.json</code>文件。后来我望着命令中的<code>-D</code>若有所思……，终于反应过来了，这是装在项目中的。</p>
<p>好，顺利安装，继续。</p>
<h4 id="初始化"><a href="#初始化" class="headerlink" title="初始化"></a>初始化</h4><pre><code class="bash">#初始化
et -i
</code></pre>
<p>执行完后会在根目录下生成一个<code>element-variables.scss</code>的文件。然后你就可以在这个文件中修改主题色，按钮颜色，圆角，阴影等这些样式，修改好了之后，就可以编译了。</p>
<h4 id="编译"><a href="#编译" class="headerlink" title="编译"></a>编译</h4><pre><code class="bash"># 监听并编译
et --watch [--config variable file path] [--out theme path]

# 编译
et [--config variable file path] [--out theme path] [--minimize]
</code></pre>
<p><code>et --watch</code>可以监听<code>element-variables.scss</code>文件。如果文件被修改了，那么就会自动进行编译。</p>
<p><code>et --config 文件路径/element-variables.scss</code>这个命令是可以指定<code>element-variables.scss</code>的路径，因为这个文件不一定放在项目根目录下。</p>
<p><code>et --out 目录</code>这个命令是指定编译后的文件输出目录，默认是输出在根目录下的<code>theme</code>文件夹中。</p>
<p>但这就会产生一个文件替换问题，每次编译后都需要手动替换文件，之后才能看效果。所以我直接把输出路径改成了项目引用的<code>element-ui</code>的路径：<code>node_modules/element-ui/lib/theme-chalk/</code>，这样配合<code>-w</code>就可以实现实时编译，再配合<code>npm run dev</code>就可以实时编译实时预览了。</p>
<p>如果还需要更深度的定制，则修改 <code>node_modules/element-theme-chalk/src/</code> 目录下的的<code>.scss</code>文件，然后执行编译后就能生效。注意直接修改<code>.scss</code>文件不会触发自动编译。</p>

  </div>
  <div class="post-near">
    
    <a
      class="post-near-prev"
      href="/p/9501c48.html"
      title="局域网请求 webpack 反向代理"
    >
      <span class="arrow">←</span>
      <span class="post-near-title">
        局域网请求 webpack 反向代理
      </span>
    </a>
    
    
    <a
      class="post-near-next"
      href="/p/c53d47f2.html"
      title="css 实现圆角平行四边形"
    >
      <span class="post-near-title">
        css 实现圆角平行四边形
      </span>
      <span class="arrow">→</span>
    </a>
    
  </div>
</article>

    <footer class="footer">
  <p>本博客采用 <a class="license-link" rel="license noopener" target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh">署名-非商业性使用-相同方式共享 4.0 国际</a>协议进行许可</p>
  <p>
    <span>Thanks For <a target="_blank" rel="noopener" href="https://github.com/nanxiaobei/hugo-paper" taget="_blank">hugo-paper</a></span>
    <span style="margin-left: 10px;">&copy; 2016-2025 by Tit1e</span>
  </p>
</footer>
    </div>
    <script src="//unpkg.com/@highlightjs/cdn-assets@11.5.0/highlight.min.js"></script>
<script>
  hljs.initHighlightingOnLoad();
  var _hmt = _hmt || [];
    (function() {
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?6349d3bc54baea0b04a65145c5e3b799";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
    })();
    const block = document.querySelectorAll('.post-content')[0]
    block.addEventListener('click', e => {
        const {nodeName, src} = e.target
        if(nodeName !== 'IMG') return
        document.body.classList.add('overflow-hidden')
        const div = document.createElement('div')
        div.id = 'global-cover'
        div.title = '点击关闭'
        const a = document.createElement('a')
        a.href = src
        a.target="_blank"
        a.title = '点击打开原图'
        const img = document.createElement('img')
        img.className = 'show-pic'
        img.src = src
        a.appendChild(img)
        div.appendChild(a)
        document.body.appendChild(div)
    })
    document.body.addEventListener('click', e => {
        if(e.target.id === 'global-cover'){
            document.body.classList.remove('overflow-hidden')
            document.body.removeChild(e.target)
        }
    })
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-7M04VN3JZ4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-7M04VN3JZ4');
</script>

<script src="/js/search.js"></script>


</body>
</html>